<template>
	<view :style="{
		flex: state.span
	}">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		defineComponent,
		SetupContext,
		getCurrentInstance
	} from 'vue';
	
	import ColProps from './props';
	
	const name = 'kui-col';
	
	export default defineComponent({
		name,
		props: ColProps,
		options: {
			// 小程序虚拟节点设置
			virtualHost: true
		},
		setup(props, context: SetupContext) {
			const {
				proxy
			}: any = getCurrentInstance();
			
			const state = reactive({
				span: props.span / 24
			});
			
			return {
				state
			}
		}
	});
</script>

<style lang="less">
	.kui-col {
		// display: inline-block;
	}
</style>